<template>
    <div>
      <el-card>
        <div slot="header" class="clearfix">
          <span>标签</span>
        </div>
        <el-row>
          <el-col :span="24">
              <el-form ref="searchForm" class="el-form-col search-form" :model="search">
                <el-row :gutter="15">
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="orderNo" >
                      <el-input v-model="search.orderNo" type="textarea" :rows="4" clearable
                                placeholder="关联订单  (支持多单查询，用英文逗号分隔)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="consigneName">
                      <el-input v-model="search.consigneName" placeholder="客户姓名" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="consignePhone">
                      <el-input v-model="search.consignePhone" placeholder="客户电话" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="cargoOwnerName">
                      <el-input v-model="search.cargoOwnerName" placeholder="商家名称" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
                    <el-form-item>
                      <el-row class="search-btns" :gutter="5">
                        <el-col :span="12">
                          <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                        </el-col>
                        <el-col :span="12">
                          <el-button @click="reset('searchForm')" plain>重置</el-button>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="orderType">
                      <el-select v-model="search.orderType" placeholder="关联订单类型">
                        <el-option v-for="item in orderTypeArr"
                                   :key="item.value"
                                   :label="item.text"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
                    <el-form-item>
                      <el-row class="search-btns" :gutter="5">
                        <el-col :span="12">
                          <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                        </el-col>
                        <el-col :span="12">
                          <el-button @click="reset('searchForm')" plain>重置</el-button>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="4" :md="6">
                    <el-form-item prop="storageTypeCode">
                      <el-select v-model="search.storageTypeCode" placeholder="仓储类型">
                        <el-option v-for="item in storageTypeCodeArr"
                                   :key="item.value"
                                   :label="item.text"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="show">
        <div slot="header" class="clearfix">
          <span>列表</span>
          <el-button class="pull-right" type="primary" @click.prevent="labelPrint">批量打印</el-button>
        </div>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-table
              ref="dataTable"
              :data="dataTable"
              :header-cell-style="{'text-align': 'center'}"
              :cell-style="{'text-align': 'center'}"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                fixed="left"
                type="selection">
              </el-table-column>
              <el-table-column
                fixed="left"
                width="180"
                prop="orderNo"
                label="关联订单">
                <template slot-scope="scope">
                  <a href="javascript:;" class="blue-color" @click="showDetail(scope.row)">{{scope.row.orderNo}}</a>
                </template>
              </el-table-column>
              <el-table-column
                prop="consigneName"
                label="客户姓名">
              </el-table-column>
              <el-table-column
                prop="consignePhone"
                label="客户电话">
              </el-table-column>
              <el-table-column
                prop="orderType"
                label="关联订单类型">
                <template slot-scope="scope">
                  {{scope.row.orderType | filterDataBaseDictionary}}
                </template>
              </el-table-column>
              <el-table-column
                prop="warehouse"
                label="入库仓">
              </el-table-column>
              <el-table-column
                prop="storageTypeCode"
                label="仓储类型">
                <template slot-scope="scope">
                  {{scope.row.storageTypeCode | filterDataBaseDictionary}}
                </template>
              </el-table-column>
              <el-table-column
                prop="cargoOwnerName"
                label="商家名称">
              </el-table-column>
              <el-table-column
                prop="totalPackage"
                label="总包件">
              </el-table-column>
              <el-table-column
                prop="totalVolume"
                label="总体积">
              </el-table-column>
              <el-table-column
                prop="totalWeight"
                label="总重量">
              </el-table-column>
              <el-table-column
                prop="foundtime"
                label="下单时间">
                <template slot-scope="scope">
                  {{scope.row.foundtime | unixTimestampFilter}}
                </template>
              </el-table-column>
              <el-table-column
                width="80"
                prop="printNum"
                label="打印次数">
              </el-table-column>
              <el-table-column
                width="150"
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="show(scope.row)">详情</el-button>
                  <el-button type="text" @click="labelPrint(scope.row)">打印标签</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <Pagination style="margin-top: 20px" class="pull-right" :total-item="totalItem" @pagination="pagination" @sizeChange="sizeChange" :perItem="params.pageSize"></Pagination>
      </el-card>
      <Label-modal ref="LabelModal" :printData="printData" @refresh="getTableData"></Label-modal>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import LabelModal from '@/views/oms/print/label/LabelModal'
import {copy, merge, alert} from '@/utils'
import {unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
import {getSubDictListOfParentCode} from '@/utils/selectOptions'
export default {
  name: 'printLabelIndex',
  components: {
    LabelModal,
    Pagination
  },
  filters: {
    unixTimestampFilter,
    filterDataBaseDictionary
  },
  data() {
    return {
      isOpen: false,
      visible: false,
      searchLoading: false,
      search: {
        orderNo: '',
        consigneName: '',
        consignePhone: '',
        cargoOwnerName: '',
        orderType: '',
        storageTypeCode: ''
      },
      orderTypeArr: [],
      storageTypeCodeArr: [],
      dataTable: [],
      checkedData: [],
      printData: [],
      searchOpen: false,
      totalItem: 0,
      params: {
        pageSize: 20,
        pageNum: 1
      }
    }
  },
  created() {
    getSubDictListOfParentCode('STORAGEORDERTYPE').then(arr => {
      this.orderTypeArr = arr || []
    })
    getSubDictListOfParentCode('CARGOSOURCETYPE').then(arr => {
      this.storageTypeCodeArr = arr || []
    })
    this.getTableData()
  },
  methods: {
    pagination(page) {
      this.params.pageNum = page
      this.getTableData()
    },
    sizeChange(size) {
      this.params.pageSize = size
      this.getTableData()
    },
    handleSelectionChange(data) {
      this.checkedData = data
    },
    searchFunc(search) {
      this.getTableData()
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    },
    getTableData() {
      let data = copy(this.search, true)
      data = merge(data, this.params)
      this.searchLoading = true
      this.$ajax.table('/ms-terminal-order/labelPrint/findLabelPrintList', data).then(response => {
        this.dataTable = response.data || []
        this.totalItem = response.totalItem
      }).finally(_ => {
        this.searchLoading = false
      })
    },
    labelPrint(single) {
      this.printData = []
      if (single.orderId) {
        this.printData.push(single)
      } else {
        if (!this.checkedData.length) {
          alert('请选择需打印的订单', '提示', 'warning')
          return
        }
        this.printData = this.checkedData
      }
      this.$refs.LabelModal.show()
    },
    showDetail(data) {
      // boolTrunk:true(干线)
      this.$router.push({path: '/ss-oms/orders/service-orders/show/' + data.orderId})
    },
    show(data) {
      if (data.boolTrunk) {
        // 干线的订单详情
        this.$router.push({path: '/ss-oms/orders/service-orders/show/' + data.orderId})
      } else {
        // 直营的 打印详情：
        this.$router.push({path: '/ss-oms/print/label/show/' + data.orderId})
      }
    }
  }
}
</script>
